<template>
  <div style="padding-top: 10px">
    <a-row style="margin-bottom: 10px;background: -webkit-linear-gradient(#fafafa,#f4f4f4 40%,#e5e5e5);border: 1px solid #ddd;
    border-bottom-color: #ccc;
    border-radius: 4px;">
      <a-col :span="12">
        <a-button type="link" @click="example()">示例JSON</a-button>
      </a-col>
      <a-col :span="12">
        <a-button @click="copyJson()" type="link">
          <template #icon><copy-outlined/></template>
          复制JSON
        </a-button>
      </a-col>
    </a-row>
    <a-row :gutter="[16,16]">
    <a-col :span="12">
      <a-mentions
          v-model:value="sourceText"
          rows="20"
          @change="format()"
          placeholder="在这里粘贴您想要格式化的json内容"
      >
      </a-mentions>
    </a-col>
    <a-col :span="12">

      <div v-if="dataJson">
      <vue-json-pretty :data="dataJson"
                       showLength showLine showLineNumber showIcon
      @nodeClick="nodeClick"
      >
<!--        <template #renderNodeKey="{ node, defaultKey }">-->
<!--          <span v-on:mouseover="handleMouseOver" v-on:mouseout="handleMouseOut">{{defaultKey}}</span>-->
<!--        </template>-->
<!--        <template #renderNodeValue="{ node, defaultValue }">-->
<!--          <span v-on:mouseover="handleMouseOver(node)" v-on:mouseout="handleMouseOut">{{defaultValue}}-->
<!--            <span v-if="showCopy" style="position: absolute;right:0px;cursor: pointer;">复制</span>-->
<!--          </span>-->
<!--        </template>-->
      </vue-json-pretty>
      </div>
    </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import { CopyOutlined} from '@ant-design/icons-vue';
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import {ref} from "vue";
import {message} from "ant-design-vue";
const sourceText = ref()
const dataJson =  ref();
const showCopy = ref();

//复制JSON
const copyJson =()=>{
  const formattedJsonData = JSON.stringify(dataJson.value, null, 2)
  navigator.clipboard.writeText(formattedJsonData)
  message.success("已复制到剪切板")
}

//格式化
const format= ()=>{
  dataJson.value = JSON.parse(sourceText.value)
}

//点击节点
const nodeClick=(node: any)=>{
debugger
}

//handleMouseOver
const handleMouseOver=(obj:any)=>{
  console.log(obj)
  showCopy.value = true;
}

//handleMouseOut
const handleMouseOut=()=>{
  showCopy.value = false;
}



//示例JSON
const example = ()=>{
  dataJson.value={
    "date": "27",
    "high": "高温 18℃",
    "low": "低温 6℃",
    "ymd": "2023-03-27",
    "week": "星期一",
    "sunrise": "06:03",
    "sunset": "18:29",
    "aqi": 62,
    "fx": "西北风",
    "fl": "3级",
    "type": "晴",
    "notice": "愿你拥有比阳光明媚的心情"
  }
  sourceText.value = JSON.stringify(dataJson.value)
}
</script>

<style scoped>
.node-wrapper {
  position: relative;
  display: inline-block;
}

.node-wrapper button {
  position: absolute;
  right: 0;
  top: 0;
  display: none;
}

.node-wrapper:hover button {
  display: block;
}
</style>
